<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Promise发送AJAX</title>
    </head>
    <button>获取英雄联盟英雄数据</button>

    <script>
        //获取按钮
        let btn = document.querySelector("button");

        //绑定事件
        btn.addEventListener("click", function () {
            // //发送请求
            // let xhr = new XMLHttpRequest();
            // xhr.responseType = 'json';
            // //
            // xhr.open('get', 'https://api.xiaohigh.com/lo');
            // //
            // xhr.send();
            // //
            // xhr.onreadystatechange = function(){
            //     if(xhr.readyState === 4){
            //         //处理响应结果  状态码  1xx 2xx 3xx 4xx 5xx
            //         if(xhr.status >= 200 && xhr.status < 300){
            //             //成功
            //             console.log(xhr.response);
            //         }else{
            //             //失败
            //             console.log(xhr.status);
            //         }

            //     }
            // }

            // Promise
            let p = new Promise((resolve, reject) => {
                let xhr = new XMLHttpRequest();
                xhr.responseType = "json";
                //
                xhr.open("get", "https://api.xiaohigh.com/lol");
                //
                xhr.send();
                //
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        //处理响应结果  状态码  1xx 2xx 3xx 4xx 5xx
                        if (xhr.status >= 200 && xhr.status < 300) {
                            //成功
                            resolve(xhr.response);
                        } else {
                            //失败
                            reject(xhr.status);
                        }
                    }
                };
            });
        
            p.then(v => {
                console.log(v);//黑白色输出
            }, r=>{
                console.warn(r);//黄色输出
            });
        });
    </script>
    <body></body>
</html>
